<script setup>

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header height="70px" class="header">
        <el-row class="title">
          <el-col :span="24"><div class="grid-content ep-bg-purple" />
            <h2 class='title-text'>医院门诊电子病历管理系统</h2>
          </el-col>
        </el-row>
      </el-header>
      <el-main height="70px"  class="main"  >
        <el-row :gutter="20" style="background: #1ab394" height="70px" >
          <el-col :span="2" :offset="8"
          ><div class="grid-content ep-bg-purple"
          />首页</el-col>
          <el-col :span="2"
          ><div class="grid-content ep-bg-purple"
          />项目信息</el-col>
          <el-col :span="2"
          ><div class="grid-content ep-bg-purple"
          />后台管理</el-col>
          <el-col :span="2"
          ><div class="grid-content ep-bg-purple"
          />个人中心</el-col>
        </el-row>
        <div class="block text-center">
          <el-carousel height="150px">
            <el-carousel-item v-for="item in items" :key="item">
              <img :src="item.url" alt />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style>
.header{
  background: #269b9e;
}
/* .main{
  background: #ccb1ea;
}*/
.ep-bg-purple{
  background: #1ab394;
}
.title{
  display: flex;
  align-items: center;
}
.title-text{
  text-align:center;
  color: #ffffff;
  font-weight: bold;
  //#display: flex; justify-content: center;
}
.list {
  display: flex;
  flex-direction: column;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

<script setup>
export default {
  data(){
    return{
      items:[
        {url: require("@/img/picture1.jpg")},
        {url: require("@/img/picture2.jpg")},
        {url: require("@/img/picture3.jpg")},
      ]
    }
  },
  methods:{

  },
}
</script>
